<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <h2>jquery 上下滚动--单行 批量多行 文字图片上下翻滚 | 可控制向前向后的多行滚动</h2>
    <div class="scrollDiv" id="s3">
     <ul>
      <li><a href="#">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a></li>
      <li><a href="#">jquery评论星星打分特效、鼠标滑过星星显示评论信息</a></li>
      <li><a href="#">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></li>
      <li><a href="#">jquery 图片切换滚动特效带分页索引按钮控制左右图片切换滚动</a></li>
      <li><a href="#">jquery筛选器插件选项卡 css3制作一个漂亮的HTML5筛选容器插件选项卡</a></li>
      <li><a href="#">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
      <li><a href="#">jquery特效基于jquery幻灯片插件制作一个泡沫幻灯片图片展示特效</a></li>
      <li><a href="#">jquery 图片幻灯片仿IBM首页焦点图切换，类似flash动态效果图片切换</a></li>
     </ul>
    </div>
    <span id="btn1" >点击向上滚动</span>&nbsp;&nbsp;<span id="btn2">点击向下滚动</span>
    <script src="http://tpn.gzl.com.cn/static/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    (function($){
     $.fn.extend({
      Scroll:function(opt,callback){
        //参数初始化
        if(!opt) var opt={};
        var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮
        var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮
        var timerID;
        var _this=this.eq(0).find("ul:first");
        var     lineH=_this.find("li:first").height(), //获取行高
          line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
          speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒）
          timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
        if(line==0) line=1;
        var upHeight=0-line*lineH;
        //滚动函数
        var scrollUp=function(){
          _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定
          _this.animate({
            marginTop:upHeight
          },speed,function(){
            for(i=1;i<=line;i++){
              _this.find("li:first").appendTo(_this);
            }
            _this.css({marginTop:0});
            _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件
          });
    
        }
        //Shawphy:向下翻页函数
        var scrollDown=function(){
          _btnDown.unbind("click",scrollDown);
          for(i=1;i<=line;i++){
            _this.find("li:last").show().prependTo(_this);
          }
          _this.css({marginTop:upHeight});
          _this.animate({
            marginTop:0
          },speed,function(){
            _btnDown.bind("click",scrollDown);
          });
        }
          //Shawphy:自动播放
        var autoPlay = function(){
          if(timer)timerID = window.setInterval(scrollUp,timer);
        };
        var autoStop = function(){
          if(timer)window.clearInterval(timerID);
        };
         //鼠标事件绑定
        _this.hover(autoStop,autoPlay).mouseout();
        _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
        _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
    
      }      
     })
    })(jQuery);
    
    $(document).ready(function(){
     $("#s3").Scroll({line:4,speed:500,timer:2000,up:"btn1",down:"btn2"});
    });
    </script>
</body>
</html>